<template>
	<view class="com-aside-menu" id="asideMenu" :style="comAsideMenuHeightStyle">
		<!-- 侧边菜单 -->
		<scroll-view :scroll-y="true" class="aside-menu-scroll-view" :scroll-with-animation="true" :bounces="false"
			:scroll-top="setMainMenuScrollTop" @scroll="handleMainMenuScroll">
			<ul class="aside-menu">
				<li v-for="(item, index) in menuData" class="aside-menu-item"
					:class="{'aside-menu-item-selected': mainMenuIndex === index, 'aside-menu-item-selected-next': mainMenuIndex + 1 === index, 'aside-menu-item-selected-pre': mainMenuIndex - 1 === index}"
					@click="switchMainMenu(index)" :key="index">
					<text>{{item.title.substring(0,4)}}</text>
					<text class="label">{{item.title.substring(4)}}</text>
				</li>
				<li class="aside-menu-empty"></li>
			</ul>
		</scroll-view>
		<!-- 次级内容 -->
		<view class="aside-menu-sub-scroll-view" id="asideMenuSubMenu" v-if="!enableScroll">
			<ul class="sub-menu">
				<li v-for="(menu, index) in menuData" :key="index">
					<view class="sub-menu-title">{{menu.title.substring(4)}}</view>
					<view v-for="(item, index) in menu.subMenu" class="sub-menu-item" :key="index">{{item.title}}</view>
				</li>
			</ul>
		</view>
		<scroll-view :scroll-y="true" class="aside-menu-sub-scroll-view" :bounces="false" :scroll-with-animation="true"
			@scroll="handleSubMenuScroll" :scroll-top="setSubMenuScrollTop" @scrollend="handleSubMenuScrollEnd" v-else>
			<ul class="sub-menu">
				<li v-for="(menu, index) in menuData" :key="index">
					<view class="sub-menu-title">{{menu.title.substring(4)}}</view>
					<view v-for="(item, index) in menu.subMenu" class="sub-menu-item" :key="index">{{item.title}}</view>
				</li>
			</ul>
		</scroll-view>
	</view>
	<view class="aside-menu-fixed" v-if="showIfAsideMenuFix" :style="asideMenuFixedTopStyle">
		{{menuData[mainMenuIndex].title.substring(4)}}
	</view>
</template>

<script setup lang="ts">
	import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from "vue";
	import { AsideMenuModel, SubMenuModel } from "@/types/aside_menu"
	import { rpx2px, statusBarHeight } from "../../utils/utils";
	import { HEADER_HEIGHT, TAB_HEIGHT } from "../../constant/constant";
	const props = defineProps({
		menuData: Array<AsideMenuModel>,//菜单数据
		showIfAsideMenuFix: {
			type: Boolean
		},
		enableScroll: {
			type: Boolean // 控制子列表能否滚动
		}
	})
	// 一级菜单
	const mainMenuIndex = ref(0)
	// 选中菜单
	const switchMainMenu = (index : number) => {
		mainMenuIndex.value = index
		setSubMenuScrollTop.value = realHeight(index - 1) + 1 // 临界值 + 1
		// 当切换了菜单，直接控制外部的父级列表滚动
		emit('switchAsideMenu', true)
	}
	// 主/次级菜单距离顶部
	const setSubMenuScrollTop = ref(0.0)
	const getSubMenuScrollTop = ref(0.0)
	const getMainMenuScrollTop = ref(0.0)
	const setMainMenuScrollTop = ref(0.0)
	// 主级菜单滚动
	const handleMainMenuScroll = (e) => {
		getMainMenuScrollTop.value = e.detail.scrollTop
	}
	// 次级菜单滚动
	const mainMenuKeepScrollTop = 200 // 估计一个位置，让左侧的菜单被选中时能看到
	let scrollTimeOutId = null
	const subMenuIsScrolling = ref(false)
	const handleSubMenuScroll = (e) => {
		// 没有滚动就更新当前滚动的数值
		subMenuIsScrolling.value = true
		clearTimeout(scrollTimeOutId)
		scrollTimeOutId = setTimeout(() => {
			subMenuIsScrolling.value = false
		}, 300)
		if (!subMenuIsScrolling.value) {
			setSubMenuScrollTop.value = e.detail.scrollTop
		}
		
		getSubMenuScrollTop.value = e.detail.scrollTop
		for (let i = 0; i < props.menuData.length; i++) {
			if (getSubMenuScrollTop.value <= realHeight(i)) {
				mainMenuIndex.value = i
				setMainMenuScrollTop.value = rpx2px(mainMenuIndex.value * 70) - mainMenuKeepScrollTop
				break;
			}
		}
	}
	const handleSubMenuScrollEnd = (e) => {
		console.log('滚动结束')
	}
	// 计算真实高度（70 为标题高度 & 300 为内容高度）
	const realHeight = (index : number) => {
		let sum = 0
		for (let i = 1; i <= index + 1; i++) {
			sum += 70 + 300 * props.menuData[i - 1].subMenu.length
		}
		return rpx2px(sum)
	}
	
	// 获取组件的高度
	const emit = defineEmits(['asideMenuData', 'switchAsideMenu'])
	onMounted(() => {
		const instance = getCurrentInstance()
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select('#asideMenu').boundingClientRect((data: UniApp.NodeInfo) => {
			emit('asideMenuData', data)
		}).exec()
	})
	
	// 菜单高度
	const statusH = statusBarHeight()
	const comAsideMenuHeightStyle = computed(() => `height: calc(100vh - ${HEADER_HEIGHT}rpx - ${TAB_HEIGHT}rpx - ${statusH}px);`)
	const asideMenuFixedTopStyle = computed(() => `top: calc(${HEADER_HEIGHT}rpx + ${TAB_HEIGHT}rpx + ${statusH}px);`)
</script>

<style scoped lang="scss">
	@import '../../styles/variable.scss';

	.com-aside-menu {
		display: flex;
		flex-direction: row;
		
		.aside-menu-scroll-view {
			height: 100%;
			width: $asideMainMenuWidth;

			.aside-menu {
				background-color: white;

				.aside-menu-item {
					height: $asideMainMenuHeight;
					padding: 20rpx 10rpx;
					font-size: $secondaryFontsize;
					text-align: center;
					background-color: $secondaryColor;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
				}

				.aside-menu-item-selected {
					background-color: white;
				}

				.aside-menu-item-selected-next {
					border-top-right-radius: 15rpx;
				}

				.aside-menu-item-selected-pre {
					border-bottom-right-radius: 15rpx;
				}
			}

			.aside-menu-empty {
				height: 600rpx;
				background-color: $secondaryColor;
			}
		}

		.aside-menu-sub-scroll-view {
			flex: 1;

			.sub-menu {
				width: 100%;
				background-color: white;
				font-size: $secondaryFontsize;

				.sub-menu-title {
					height: $subMenuTitleHeight;
					line-height: $subMenuTitleHeight;
					margin-left: 10rpx;
				}

				.sub-menu-item {
					height: 300rpx;
					background-color: lightgoldenrodyellow;
					text-align: center;
					font-size: $firstFontsize;
					border-bottom: 1rpx solid black;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.aside-menu-fixed {
		width: calc(100vw - $asideMainMenuWidth);
		margin-left: $asideMainMenuWidth;
		padding-left: 20rpx;
		box-sizing: border-box;
		height: $subMenuTitleHeight;
		background-color: white;
		position: fixed;
		line-height: $subMenuTitleHeight;
		font-size: $secondaryFontsize;
	}
</style>